<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Image</title>
    <script type="text/javascript" src="esl.js"></script>
</head>
<body>
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });

    require(
        [
            'zrender',
            'zrender/graphic/shape/Arc',
            'zrender/svg/svg'
        ],
        function(zrender, Arc, Circle){
            // 初始化zrender
            var zr = zrender.init(document.getElementById('main'), {
                renderer: 'svg'
            });

            for (var i = 0; i < 8; ++i) {
                var s = 0 + Math.PI / 4 * i;
                for (var j = 0; j < 8; ++j) {
                    var e = Math.PI / 4 * j;
                    var arc = new Arc({
                        shape: {
                            cx: 50 + 100 * i,
                            cy: 50 + 100 * j,
                            r: 20
                        },
                        style: {
                            stroke: '#aaa'
                        }
                    });
                    zr.add(arc);
                    var arc = new Arc({
                        shape: {
                            cx: 50 + 100 * i,
                            cy: 50 + 100 * j,
                            r: 20,
                            startAngle: s,
                            endAngle: e,
                            clockwise: true
                        },
                        style: {
                            stroke: '#f00'
                        }
                    });
                    zr.add(arc);
                }
            }
        }
    );
    </script>
    <div id="main" style="width:1000px;height:800px;"></div>

</body>
</html>